<template>
    <section>
        <goback :getName='goName'></goback>
        <div class="bgcolor"></div>
        <div class="rulePage" v-if="ifShowRule">
            <div class="ruleLogo">
                <div class="ruleWords">
                    <div class="ruleTitle">活动规则</div>
                    <div class="ruleContain">
                        <div class="rTitle">一、活动规则</div>
                        <div class="ruleLine">1、用户参与《好礼周周领》活动，购买极美耶明星礼盒面膜一盒。</div>
                        <div class="ruleLine">2、购买成功后，于次周起可免费领取两年礼品，礼品时时更新，每周限领一次(快递费自理)。</div>
                        <div class="ruleLine">3、购买或领取产品后，消费者均会获得消费等值（消费金、快递费）的消费积分，可在商城购买任何商品时进行抵扣，抵扣比例根据产品不同，在20%-50%区间浮动。</div>
                        <div class="ruleLine">4、成功分享好友参与本活动可获得一定奖励。</div>
                        <div class="ruleLine">5、本活动每个微信账号只限参与一次。</div>
                        <div class="rTitle rTitle2">二、奖励详情</div>
                        <div>
                            <table>
                                <tr>
                                    <td></td>
                                    <td>奖励名目</td>
                                    <td>奖励积分</td>
                                </tr>
                                <tr>
                                    <td rowspan="2">购买环节</td>
                                    <td>分享奖</td>
                                    <td>120元</td>
                                </tr>
                                <tr>
                                    <td>管理奖</td>
                                    <td>40元</td>
                                </tr>
                                <tr>
                                    <td rowspan="2">领取环节</td>
                                    <td>分享奖</td>
                                    <td>1元</td>
                                </tr>
                                <tr>
                                    <td>管理奖</td>
                                    <td>0.5元</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <img src="../../assets/mm/tc.png">
                <div class="closeBtn" @click="hiddenRule">
                    <img src="../../assets/mm/gb.png">
                </div>
            </div>
        </div>
        <!-- <div class="smallLogo">
            <div @click="rule">
                <img src="../../assets/mm/hdgz.png">
            </div>
            <div @click="record">
                <img src="../../assets/mm/lqjl.png">
            </div>
            <div class="qrc">
                <img src="../../assets/mm/egz.png"  v-preview="qrcSrc">
            </div>
        </div> -->
        <div class="topImg">
            <img src="../../assets/mm/lqbanner.png">
        </div>
        <section class="goodsContain">
            <div class="goodss" v-for="goods of goodses">
                <div class="imgContain">
                    <img :src="goods.thumbnail">
                </div>
                <div class="goodsDetail_">
                    <div>{{goods.name}}</div>
                    <div class="oldPrice">￥{{goods.defaultPrice/100}}</div>
                    <div class="newPrice">￥0</div>
                    <div class="reciveBtn" @click="recive(goods.id)">领取</div>
                </div>
            </div>
        </section>
        <lg-preview></lg-preview>
    </section>
</template>
<script>
    import goback from '../../components/goback'
    import { userInfoGet, WXShare } from '../../libs/publicMethod'
    import { product, getClaimMaskRecord } from '../../libs/interface'
    export default {
        components: { goback, userInfoGet, WXShare, product, getClaimMaskRecord },
        data() {
            return {
                userInfo: userInfoGet(),
                goName: '领取商品',
                goodses: [],
                ifShowRule: false,
                qrcSrc: require('../../assets/mm/egz.png'),
            }
        },
        methods: {
            record () {
                let vm = this
                let params = {
                    memberId: vm.userInfo.id
                }
                getClaimMaskRecord(params, (data) => {
                    if (data.code === 1) {
                        if (data.payload.length === 0) {
                            vm.$toast('暂无领取记录')
                            return
                        } else {
                            vm.$router.push('/record')
                        }
                    } else {
                        vm.$toast('暂未请求到数据,请稍后再试')
                    }
                })
            },
            recive (id) {
                let vm = this
                vm.$router.push('/receiveGoods/' + id)
            },
            rule() {
                this.ifShowRule = true
            },
            hiddenRule() {
                this.ifShowRule = false
            },
        },
        mounted() {
            let vm = this
            var Sdata = {                                                          //分享请求配置
                gotoPage: '/facialMask',
                //邀请者链接         
                inviterID: vm.userInfo.id,                                              //链接带的参数
                type: 1,
                desc: '买一盒送两年，众多好礼周周领，邀好友参与还有奖励哦。',
                //链接图片（小图）     
                imgUrl: '',
                //邀请话
                shareTitle: '【' + vm.userInfo.nick + '】' + '邀您参与乐销商城好礼周周领活动',
            }
            WXShare.topShare(Sdata)
            let params = {
                productType: -5,
                runType: 1,
                limit: 100,
                offset: 0,
                likeStr: '',
                sidx: 'createTime',
                sord: 'DESC',
            }
            product(params, (data) => {
                if (data.code === 1) {
                    vm.goodses = data.payload
                    console.log(vm.goodses)
                } else {
                    vm.$toast('暂未请求到数据,请稍后再试')
                }
            })
        },
    }
</script>
<style scoped>
.bgcolor{
    width: 100%;
    height: 100%;
    z-index: -1;
    position: fixed;
    top: 0;
    background-color: #fff;
}
.rulePage{
    width: 100%;
    height: 100%;
    z-index: 5;
    position: fixed;
    top: 0;
    background-color: rgba(0,0,0,.7);
}
.ruleLogo{
    position: absolute;
    top: 8%;
    right: 10%;
    width: 76%;
    z-index: 6;
}
.ruleWords{
    position: absolute;
    width: 76%;
    height: 100%;
    right: 10%;
    top: 8%;
    z-index: 6;
}
.ruleTitle{
    margin: -2.5% 10% 0 0;
    letter-spacing: .1rem;
    color: #705233;
    font-size: 1.1rem;
    font-weight: bold;
}
.ruleContain{
    height: 72%;
    margin: 12% 12% 0% 0%;
    font-size: .7rem;
    text-align: left;
    overflow: auto;
}
.rTitle{
    color: #A07546;
    margin-bottom: 5%;
}
.rTitle2{
    margin-top: 10%;
}
.ruleLine{
    transform: scale(.9,.9);
    line-height: 1.4rem;
    margin: 0 -5%;
    color: #333;
}
table{
    border-collapse:collapse;
    width: 98%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 5%;
}
table td{
    border: 1px solid #000;
    height: 1.6rem;
}
.ruleLogo img{
    width: 100%;
}
.closeBtn{
    position: absolute;
    width: 12%;
    top: 0%;
    right: -1%;
}
.closeBtn img{
    width: 100%;
}
.smallLogo{
    width: 2.5rem;
    position: fixed;
    z-index: 10;
    top: 33%;
    right: 3%;
}
.smallLogo img{
    width: 100%;
    height: 100%;
}
.qrc{
    transform: scale(1.4,1.4);
    margin-top: 100%;
}
.topImg{
    width: 100%;
    position: relative;
}
.topImg img{
    display: block;
    width: 100%;
}
.goodsContain{
    padding-top: .5rem;
    background-color: #fff;
}
.goodss{
    border-bottom: 1px solid #F6F6F7;
    display: flex;
    margin-left: .8rem;
    position: relative;
}
.imgContain{
    width: 8rem;
    height: 6.4rem;
}
.imgContain img{
    display: block;
    width: 100%;
    height: 100%;
}
.goodsDetail_{
    display: flex;
    flex-direction: column;
    font-size: .8rem;
    margin: 3% 0 0 8%;
    text-align: left;
}
.oldPrice{
    margin-top: .8rem;
    color: #808080;
    text-decoration: line-through;
    font-weight: bold;
}
.newPrice{
    /* margin: .2rem 0 0 -.4rem;; */
    margin: .2rem 0 0 0;;
    color: #F23030;
    font-size: .9rem;
    font-weight: bold;
}
.reciveBtn{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5%;
    margin: auto;
    width: 5rem;
    height: 1.4rem;
    line-height: 1.4rem;
    text-align: center;
    background-color: #E22419;
    color: #fff;
    border-radius: .2rem;
    font-size: .7rem;
    
}
</style>